iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 9
0
Modern Web

30天帶你潮玩Spring Boot Zone系列 第 9

[Day9] – Spring Boot的視圖(View)和模板引擎Thymeleaf介紹

  • 分享至 

  • xImage
  •  

閱讀時間: 10分鐘

在過去的幾日都分別講了模型(Model)和控制器(Controller),今天就跟大家講講Spring Boot中的視圖(View)是怎樣。視圖(View)是在客戶端的瀏覽器以網頁形式展示出來,而要將資料展示出來就需要不同的靜態資源。

為了詳細解釋,請大家打開Eclipse,然後再點開之前創建的項目。
https://ithelp.ithome.com.tw/upload/images/20190914/20119569FF648HJaXo.jpg
剛才提到的靜態資源就是放左src/main/resources的目錄底下。
如上圖所示紅框內的位置。

為了將資料展示出來,Spring Boot 就要使用模板引擎來做出視圖(View)。
在Java的MVC框架中,最為大家熟悉的可能是JSP,其實除了JSP,還有其他同類。

模板引擎

-FreeMarker
-Groovy
-Thymeleaf(在Spring4.0中,Spring Boot官方推荐)
-Velocity
-Mustache
-JSP

Thymeleaf 可以取代JSP

以下是官方的問答:

Can Thymeleaf be used as a complete substitute for JSP and JSTL?
究竟Thymeleaf能否完全取代JSP and JSTL?
Absolutely. Not only it can, but we strongly encourage you to do so.
絕對可以,而且我們強烈鼓勵你使用。

所以我們用Thymeleaf就可以,而且它可以支援不同類別的模板
包括以下:
-HTML (HTML5, XHTML 1.0/1.1, HTML 4)
-XML
-TEXT (plain text)
-JAVASCRIPT (.js files)
-CSS (.css files)

怎樣使用Thymeleaf模板?

第1步: 安裝Maven/Gradle

如果Eclipse沒有安裝Maven/Gradle 可以去Eclipse Marketplace
https://ithelp.ithome.com.tw/upload/images/20190914/2011956976RXqkR7P0.jpg

點一下Eclipse Marketplace,進入以下畫面。
https://ithelp.ithome.com.tw/upload/images/20190914/201195697L1zIar5V9.jpg

在”Find”右邊的空位輸入Maven,再按一下右邊的小小放大鏡去搜尋。
見到Maven(Java EE) Integration for Eclipse WTP,再按一下Install就可以。
如果順利安裝完成就會可能Install變成installed。

第2步: 需要修改spring-project-2026的目錄底下的pom.xml

https://ithelp.ithome.com.tw/upload/images/20190914/20119569sBqQa4GAlw.jpg

點開pom.xml就會看到以下代碼(如果是有所分別的話,不用擔心,可以修改成最終版本)

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.1.8.RELEASE</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>
	<groupId>com.example</groupId>
	<artifactId>spring-project-2026</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<packaging>war</packaging>
	<name>spring-project-2026</name>
	<description>Demo project for Spring Boot</description>

	<properties>
		<java.version>1.8</java.version>
	</properties>

	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-tomcat</artifactId>
			<scope>provided</scope>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>

</project>

只要在<dependencies> </dependencies>內加入以下代碼就可以

<!-- Template Engine -->
		<dependency>
      		<groupId>org.springframework.boot</groupId>
      		<artifactId>spring-boot-starter-thymeleaf</artifactId>
    	</dependency>

以下是完整pom.xml的代碼

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.1.8.RELEASE</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>
	<groupId>com.example</groupId>
	<artifactId>spring-project-2026</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<packaging>war</packaging>
	<name>spring-project-2026</name>
	<description>Demo project for Spring Boot</description>

	<properties>
		<java.version>1.8</java.version>
	</properties>

	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-tomcat</artifactId>
			<scope>provided</scope>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
		
		<!-- Template Engine -->
		<dependency>
      		<groupId>org.springframework.boot</groupId>
      		<artifactId>spring-boot-starter-thymeleaf</artifactId>
    	</dependency>
    	
	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>

</project>

Thymeleaf的基本配置就已經完成了
如果大家有遇到什麼問題,歡迎在下面留言發問。

參考文章/網站/書本:
-Thymeleaf


上一篇
[Day8] - MySQL Workbench 使用 (建立一個資料庫Datbase和一個表格Table)
下一篇
[Day 10] - 實戰 - 使用thymeleaf
系列文
30天帶你潮玩Spring Boot Zone15
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言